{include file="../public/head" /}

<link rel="stylesheet" href="__STATIC__/mobile/css/mdui.css" />
<link rel="stylesheet" href="__STATIC__/mobile/css/app.css" />

</head>
<body>
<div class="container-fluid">
    <!--右部菜单-->
    {include file="public/right" /}
    <div class="log-logo">
        <h1 class="title-center" style="text-align: center;">车辆上传</h1>
    </div>
    <div class="log">
        <div class="log-con">
            <div class="layui-card">
                <div class="layui-card-header">注意事项</div>
                <div class="layui-card-body">
                    1 支持 拍摄和选取相册车辆<br>
                    2 仅能上传图片格式<br>
                    3 直接拍车辆车牌照片即可<br>
                    4 杜绝繁琐，只要快捷<br>
                    5 提示错误信息后请重新上传<br>
                </div>
            </div>
            <fieldset class="layui-elem-field">
                <legend>第一步 拍摄车牌</legend>
                <div class="layui-field-box">
                    <div class="m-t ibox-content layui-form">
                        <div class="layui-form-item">
                            <div class="layui-upload">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn layui-btn-normal" id="test8"><i class="layui-icon">&#xe660;</i>拍摄</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field">
                <legend>第二步 识别车牌</legend>
                <div class="layui-field-box">
                    <!--form元素开始-->
                    <div class="m-t ibox-content layui-form">
                        <div class="layui-form-item">
                            <div class="layui-upload">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" id="test9"><i class="layui-icon">&#xe665;识别</i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--form元素结束-->
                </div>
            </fieldset>
            <fieldset class="layui-elem-field">
                <legend>第三步 确认资料</legend>
                <div class="layui-field-box">
                    <!--form元素开始-->
                    <div class="m-t ibox-content layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">车牌:</label>
                            <div class="layui-input-block">
                                <input type="text" name="car_number" id="car_number" required  lay-verify="required" placeholder="拍照后自动识别" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">车辆照片:</label>
                            <div class="layui-input-block">
                                <input type="text" name="car_thumb" id="car_thumb" required  lay-verify="required" placeholder="车辆照片" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                        <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="component-form-element"><i class="layui-icon" id="loading">&#xe681;</i>上传资料</button>
                    </div>
                    <!--form元素结束-->
                </div>
            </fieldset>
        </div>
    </div>
    <script>
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;
            //选完文件后不自动上传
            upload.render({
                elem: '#test8'
                ,url: '{:url(\'api/upload/car_upload\')}' //改成您自己的上传接口
                ,auto: false
                ,multiple: true
                ,size: 16000
                ,bindAction: '#test9'
                ,done: function(res){
                    var index = layer.load();
                    if(res.status == 500) {
                        layer.close(index);
                        layer.open({
                            title: '识别失败'
                            ,content: res.message
                        });
                    }else if(res.status == 200) {
                        layer.close(index);
                        layer.msg('识别成功');
                        //上传成功，DOM元素发生变化
                        $('#car_number').attr('value',res.data.car_number);
                        $('#car_thumb').attr('value',res.data.car_thumb);
                    }
                }
            });
        });
    </script>
<!--    <script>-->
<!--        layui.use('upload', function() {-->
<!--            var $ = layui.jquery-->
<!--                , upload = layui.upload;-->
<!--            //普通图片上传-->
<!--            var uploadInst = upload.render({-->
<!--                elem: '#test1'-->
<!--                ,url: "{:url('api/upload/car_upload')}" //改成您自己的上传接口-->
<!--                ,auto: true-->
<!--                ,multiple: false-->
<!--                ,size: 20480-->
<!--                ,field: 'file'-->
<!--                ,accept: 'images'-->
<!--                ,before: function(obj){-->
<!--                    //预读本地文件示例，不支持ie8-->
<!--                    obj.preview(function(index, file, result){-->
<!--                        $('#demo1').attr('src', result); //图片链接（base64）-->
<!--                    });-->
<!--                    $('#loading').attr('class','layui-icon layui-icon-loading');-->
<!--                }-->
<!--                ,done: function(res){-->
<!--                    //如果上传失败，此处0是自己自定义-->
<!--                    if(res.status == 500){-->
<!--                        return layer.msg('识别失败，请重传');-->
<!--                    }-->
<!--                    //上传成功，DOM元素发生变化-->
<!--                    $('#car_number').attr('value',res.data.car_number);-->
<!--                    $('#car_thumb').attr('value',res.data.car_thumb);-->
<!--                    $('#loading').attr('class','layui-icon layui-icon-ok');-->
<!--                    $('.layui-btn-disabled').attr('class','layui-btn layui-btn-normal');-->
<!--                }-->
<!--                ,error: function(){-->
<!--                    //演示失败状态，并实现重传-->
<!--                    var demoText = $('#demoText');-->
<!--                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');-->
<!--                    demoText.find('.demo-reload').on('click', function(){-->
<!--                        uploadInst.upload();-->
<!--                    });-->
<!--                    //识别，DOM元素发生变化-->
<!--                    $('#loading').attr('class','layui-icon layui-icon-close ');-->
<!--                    $('.layui-btn-normal').attr('class','layui-btn layui-btn-disabled');-->
<!--                }-->
<!--            });-->
<!--        });-->
<!--    </script>-->
    <script>
        //Demo
        layui.use('form', function(){
            var form = layui.form;
            //监听提交
            form.on('submit(component-form-element)', function (data) {
                var index = layer.load();
                //$('.layui-btn').addClass('layui-disabled').attr('disabled','disabled');
                $.ajax({
                    url:"{:url('index/car/upload')}",
                    type:'post',
                    dataType:'json',
                    data:data.field,
                    success:function(res){
                        if (res.data == 1) {
                            layer.close(index);
                            layer.open({
                                title: '上传车辆'
                                ,content: res.message
                            });
                        } else if (res.data == 0) {
                            layer.close(index);
                            layer.open({
                                title: '上传车辆'
                                ,content: res.message
                            });
                        } else {
                            layer.close(index);
                            layer.open({
                                title: '上传车辆'
                                ,content: '出现未知错误，如果问题一直出现，您可以联系管理员或站点留言'
                            });
                        }
                    },error:function () {
                        layer.close(index);
                        layer.open({
                            title: '上传车辆'
                            ,content: '当前网络环境不安全，拒绝登录，请调整网络环境'
                        });
                    }
                })
            });
        });
    </script>
    <script>
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                title: '识别车辆提示'
                ,content: '1.车辆选取支持拍摄和选取相册<br>' +
                          '2.在点击识别后不要着急，等待出现提示后再操作<br>'

            });
        });
    </script>
    <!--底部版权-->
    {include file="../public/footer" /}
</div>
<script src="__STATIC__/mobile/js/mdui.js"></script>
</body>
</html>